const useTabPaneAnimation = (activeTab, callback) => {
    watch(activeTab, (newTab, oldTab) => {
        nextTick(() => {
            if (!oldTab) {
                setTimeout(() => {
                    let newTabEle = document.querySelector("#tab-" + newTab)
                    if (newTabEle && callback) callback(newTabEle.innerText)
                });
            } else {
                let newTabEle = document.querySelector("#tab-" + newTab)
                const oldTabEle = document.querySelector("#tab-" + oldTab)
                const tabItem = document.querySelectorAll(".el-tabs__item")
                const currentIndex = Array.from(tabItem).indexOf(newTabEle)
                const previousIndex = Array.from(tabItem).indexOf(oldTabEle)
                if (currentIndex !== previousIndex) {
                    const animateClass = currentIndex > previousIndex ? "animate__animated animate__fadeInLeft animate__fast" : "animate__animated animate__fadeInRight animate__fast"
                    document.querySelector("#pane-" + newTab).classList = "el-tab-pane " + animateClass
                }
                if (newTabEle && callback) callback(newTabEle.innerText)
            }
        })
    }, { immediate: true })

    onDeactivated(() => {
        for (let ele of document.querySelectorAll(".el-tab-pane.animate__animated")) {
            ele.classList = "el-tab-pane"
        }
    })
}

export default useTabPaneAnimation